<script setup>
import {CirclePlus, Plus, Shop, Star} from "@element-plus/icons-vue";
import LaunchStorePage from "@/views/merchant/LaunchStorePage.vue";
import {ref} from "vue";
import {getStoreListByMerchantId} from "@/api/store";
import {getCurMerchant} from "@/api/merchant";
import {ElMessageBox} from "element-plus";
import {insertANewPost} from "@/api/merchantPost";
import PostPublish from "@/views/merchant/PostPublish.vue";

const curMerchant = ref({})
const storeList = ref([]); // 店铺列表

const storeId = ref();
const postType = ref('店铺公告'); // 贴文类型，默认为店铺公告
const title = ref(''); // 贴文标题
const contentText = ref(''); // 贴文内容
const mediaUrls = ref([]); // 上传的图片或视频链接
const visibility = ref('公开'); // 可见范围，默认为公开
const publishedAt = ref(); // 发布时间

const newPost = ref({
  storeId: storeId.value,
  postType: postType.value,
  title: title.value,
  contentText: contentText.value,
  mediaUrls: mediaUrls.value,
  visibility: visibility.value,
  publishedAt: publishedAt.value
});

// 获取当前商家信息，然后接着查询商家的店铺
const getCurMerchantInfoWithStores = () => {
  getCurMerchant().then(res => {
    console.info("当前登录的商家信息：", res.data);
    if (res.data) {
      curMerchant.value = res.data
      getStoreListByMerchantId(curMerchant.value.id).then(res => {
        storeList.value = res.data;
      })
    } else {
      ElMessageBox.alert('请先登录商家账号', '提示', {
        confirmButtonText: '确定',
        type: 'warning'
      }).then(() => {
        router.push({path: '/merchantLoginPage'})
      })
    }
  })
}
getCurMerchantInfoWithStores()

// 上传图片
const handleMediaSuccess = (res) => {
  newPost.value.mediaUrls.push(res.data.url)
  console.log(newPost.value.mediaUrls)
}

// 创建贴文
const onSubmit = () => {
  console.log(postType.value)
  if (!storeId.value || !title.value || !contentText.value) {
    ElMessageBox.alert('请填写完整的贴文信息', '提示', {
      confirmButtonText: '确定',
      type: 'warning'
    });
    return;
  }
  newPost.value = {
    storeId: storeId.value,
    postType: postType.value,
    title: title.value,
    contentText: contentText.value,
    mediaUrls: mediaUrls.value,
    visibility: visibility.value,
    publishedAt: new Date().toISOString() // 使用当前时间作为发布时间
  };
  console.log("创建的贴文信息：", newPost.value);
  insertANewPost(newPost.value).then(res => {
    if (res.data) {
      ElMessageBox.alert('贴文发布成功', '提示', {
        confirmButtonText: '确定',
        type: 'success'
      });
      clearForm(); // 清空表单
    } else {
      ElMessageBox.alert('贴文发布失败，请稍后再试', '提示', {
        confirmButtonText: '确定',
        type: 'error'
      });
    }
  }).catch(err => {
    console.error("发布贴文时发生错误：", err);
    ElMessageBox.alert('贴文发布失败，请稍后再试', '提示', {
      confirmButtonText: '确定',
      type: 'error'
    });
  })
}

// 清空表单
const clearForm = () => {
  storeId.value = '';
  title.value = '';
  contentText.value = '';
  mediaUrls.value = [];
}
</script>

<template>
  <el-card>
    <el-form label-width="auto" style="max-width: 800px; margin: 0 auto;">
      <el-form-item label="选择店铺">
        <el-select v-model="storeId" placeholder="请选择店铺">
          <el-option
              v-for="store in storeList"
              :label="store.name"
              :value="store.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="贴文标题">
        <el-input v-model="title"/>
      </el-form-item>
      <el-form-item label="贴文内容">
        <el-input v-model="contentText" type="textarea" :rows="10"/>
      </el-form-item>
      <el-form-item label="上传图片">
        <el-image
            v-for="(url, idx) in mediaUrls"
            :key="idx"
            :src="url"
            class="medias"
            style="margin-right: 10px; height: 100px"
            fit="cover"
        />
        <el-upload
            class="store-photos-uploader"
            action="/api/file/upload"
            :show-file-list="false"
            :on-success="(res, file) => handleMediaSuccess(res, file)"
        >
          <el-icon class="avatar-uploader-icon">
            <Plus/>
          </el-icon>
        </el-upload>
      </el-form-item>
      <el-form-item label="贴文类型">
        <el-radio-group v-model="postType">
          <el-radio-button label="店铺公告" value="店铺公告"/>
          <el-radio-button label="新品介绍" value="新品介绍"/>
          <el-radio-button label="促销活动" value="促销活动"/>
          <el-radio-button label="季节限定" value="季节限定"/>
          <el-radio-button label="粉丝福利" value="粉丝福利"/>
          <el-radio-button label="其他" value="其他"/>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="可见范围">
        <el-switch
            v-model="visibility"
            class="mb-2"
            style="--el-switch-on-color: #16c564; --el-switch-off-color: #419fff"
            active-text="仅粉丝可见"
            inactive-text="公开"
            active-value="仅粉丝可见"
            inactive-value="公开"
        />
<!--        <el-radio-group v-model="visibility">-->
<!--          <el-radio-button label="公开" value="公开"/>-->
<!--          <el-radio-button label="仅粉丝可见" value="仅粉丝可见"/>-->
<!--        </el-radio-group>-->
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">发布</el-button>
        <el-button @click="clearForm">清空</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<style scoped lang="scss">

</style>